<template>
	<view class="">
		<uni-nav-bar title="交易大厅" backgroundColor="#0000" color="#FFFFFF" />

		<view class="">
			<view class="zhexiantu_con">
				<view class="text-center guide-price f28 text-bold">
					<!-- 指导价：￥{{todayPrice * 1}} ≈ ${{(day_intrgral / usdratio).toFixed(4) * 1}} -->
					指导价：￥{{todayPrice * 1}}
				</view>
				<view class="mt20" style="box-sizing: border-box;width: 100%;height: 350rpx;">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartsDataColumn2" background="#0000"
						:ontouch="true" />
				</view>
			</view>
			<view class="count flex-row justify-between align-center">
				<view class="text-center">
					<view class="text-bold color-003E2E f40">
						{{wantToBuy}}
						<text class="f25 ml10">BAC</text>
					</view>
					<view class="color-003E2E f26">
						求购总量
					</view>
				</view>
				<view class="text-center">
					<view class="text-bold color-003E2E f40">
						{{deal_num}}
						<text class="f25 ml10">BAC</text>
					</view>
					<view class="color-003E2E f26">
						今日成交
					</view>
				</view>
				<view class="text-center">
					<view class="text-bold color-003E2E f40">
						{{my_num}}
						<text class="f25 ml10">BAC</text>
					</view>
					<view class="color-003E2E f26">
						可用
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn-view flex-row justify-between">
				<view class="text-center">
					<image class="btn-img" src="@/static/images/btn_otc_issue.png" mode=""></image>
				</view>
				<view class="text-center">
					<image class="btn-img" src="@/static/images/btn_otc_issue.png" mode=""></image>
				</view>
				<view class="text-center">
					<image class="btn-img" src="@/static/images/btn_otc_issue.png" mode=""></image>
				</view>
			</view>
			<!-- 搜索 -->
			<view class="seach-inp flex-row align-center flex-1">
				<image style="width: 42rpx;height: 42rpx;" src="@/static/images/icon_search.png" mode=""></image>
				<input class="inp color-007E43 f24 flex-1" type="text" @input="handleInput" placeholder="手机号搜索"
					v-model="searchData" />
				<uni-icons v-if="searchData" @tap="clear_search()" type="clear" size="18"></uni-icons>
			</view>
		</view>

		<view class="list-view">
			<view class="nav-cate">
				<view v-for="(item,index) in tradeCateList" :key="index" @click="tabTaskNav(index,item.id)" class="cate"
					:class="tabIndex == index?'taskActive':''">
					{{item.title}}
					<view v-if="tabIndex == index" class="task_tab_xhx"></view>
				</view>
			</view>

			<view v-for="(item,index) in tradeList" :key="index" class="item flex-row align-center">
				<image style="width: 83rpx; height: 83rpx;" src="@/static/logo.png" mode=""></image>
				<view class="flex-1 ml15">
					<view class="color-003E2E text-bold f28">
						{{item.order_num}}
					</view>
					<view class="color-003E2E f24">
						<text class="">
							总额：￥{{item.price*item.num}}
						</text>
						<text class="ml50">
							求购数量：{{item.num}}
						</text>
					</view>
				</view>
				<view class="">
					<image style="width: 112rpx; height: 60rpx;" src="@/static/images/btn_sell.png"></image>
				</view>
			</view>
			<view class="view_is_nodata" v-if="is_nodata">
				<!-- <image src="../../static/nodata.png" mode="aspectFill"></image> -->
				暂无数据~
			</view>
			<view class="view_is_nomore" v-if="is_nomore">
				我是有底线的~
			</view>

		</view>
	</view>
</template>

<script>
	import {
		guidePriceList,
		tradingCate,
		tradingList
	} from '@/api/otc_api'

	export default {
		data() {
			return {
				chartsDataColumn2: {},
				opts: {
					color: ["#008D3D"],
					fontColor: '#999999',
					padding: [15, 15, 0, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 5,
						rotateLabel: false,
						scrollAlign: 'right',
						scrollColor: '#008D3D',
					},
					yAxis: {
						data: [{
							tofix: 2
						}]
					},
					extra: {
						column: {

							width: 10
						},
					}
				},

				wantToBuy: '0',
				todayPrice: '0', //今日指导价
				my_num: '0', //我的bac
				deal_num: '0',
				priceList: [],
				searchData: '', //搜索内容
				tabIndex: 0,
				tradeCateList: [], // 交易大厅分类
				cateId: 0, //分类id
				tradeList: [], //列表
				page: 1,
				limit: 20,
				count: 0,
				is_nodata: false,
				is_nomore: false
			}
		},
		onLoad() {
			this.guidePriceList()
			this.getTradingCate()
		},
		methods: {
			guidePriceList() {
				var _this = this;
				guidePriceList().then((res) => {
					if (res.status == 200) {
						_this.wantToBuy = res.data.wantToBuy
						_this.todayPrice = res.data.today
						_this.deal_num = res.data.deal_num
						_this.my_num = res.data.my_num
						_this.priceList = res.data.list
						setTimeout(function() {
							_this.change();
						}, 500)
					}
				})
			},
			getTradingCate() {
				var _this = this;
				tradingCate().then((res) => {
					if (res.status == 200) {
						_this.tradeCateList = res.data
						_this.cateId = _this.tradeCateList[0].id
						_this.getTradindList()
					}
				})
			},
			change() {
				var arr = [];
				var arr1 = [];
				let arrsc = this.priceList.slice(-10);
				for (var i in arrsc) {
					arr.push(arrsc[i].date)
					arr1.push(arrsc[i].value)
				}
				this.chartsDataColumn2 = {
					"categories": arr,
					"series": [{
						"name": '',
						"data": arr1
					}]
				}
			},
			handleInput(event) {
				// 处理输入框变化事件
				this.searchData = event.target.value
			},
			clear_search() {
				this.searchData = ''
			},
			tabTaskNav(index, cateId) {
				this.tabIndex = index;
				this.cateId = cateId;
				this.tradeList = [];
				this.page = 1;
				this.is_nodata = false;
				this.is_nomore = false;
				this.getTradindList()
			},
			onPullDownRefresh() {
				uni.startPullDownRefresh();
				this.tradeList = [];
				this.page = 1;
				this.is_nodata = false;
				this.is_nomore = false;
				this.getTradindList()
			},
			onReachBottom() {
				if (this.count > this.tradeList.length) {
					this.page = this.page + 1;
					this.getTradindList()
				}
			},
			// 求购列表
			getTradindList() {
				var _this = this
				tradingList({
					cid: _this.cateId,
					page: _this.page
				}).then((res) => {
					uni.stopPullDownRefresh();
					if (res.status == 200) {
						_this.count = res.data.count;
						if (res.data.list.length > 0) {
							_this.tradeList = _this.tradeList.concat(res.data.list);
						}
						if (_this.page == 1 && res.data.list.length == 0) {
							_this.is_nodata = true;
							return
						}
						if (res.data.list.length <= _this.limit) {
							_this.is_nomore = true;
							return
						}

					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.zhexiantu_con {
		background: url('@/static/images/zhuzhuangtu_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 694rpx;
		height: 480rpx;
		margin: 20rpx auto 0;
		padding: 58rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.guide-price {
		color: $uni-text-color;
	}

	.count {
		height: 198rpx;
		background: url('@/static/images/otc_count_bg_.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 33rpx 30rpx;
		padding: 0 25rpx;
	}

	.btn-img {
		height: 78rpx;
		width: 225rpx;
	}

	.btn-view {
		padding: 0 30rpx;
	}

	.search {
		background-color: #ffffff;
		height: 60rpx;
		margin: 38rpx 30rpx;
		border-radius: 8rpx;

	}

	.seach-inp {
		overflow: hidden;
		background-color: #ffffff;
		height: 60rpx;
		margin: 20rpx 30rpx;
		border-radius: 8rpx;
		padding: 0 15rpx;
	}

	.nav-cate {
		height: 75rpx;
		display: flex;
		line-height: 75rpx;
		justify-content: space-around;

		.cate {
			text-align: center;
			// width: 33%;
			position: relative;
			color: $uni-text-color;
			font-size: 28rpx;
		}
	}

	.taskActive {
		font-size: 32rpx;
		color: $uni-text-color;
		font-weight: 700;
	}

	.task_tab_xhx {
		position: absolute;
		top: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 8rpx;
		background-color: $uni-text-color;
		border-radius: 4rpx;
	}

	.list-view {
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		margin-top: 30rpx;
		// height: 100vh;
		padding: 0 30rpx;
	}

	.item {
		background-color: #F0F6E3;
		padding: 40rpx 15rpx;
		margin-top: 26rpx;
		border-radius: 14rpx;
	}

	/* 没有数据 */

	.view_is_nodata {
		padding: 50upx 30upx;
		text-align: center;
		font-size: 30upx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 48upx;
	}

	.view_is_nomore {
		padding: 30upx;
		text-align: center;
		font-size: 28upx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 48upx;
	}
</style>